<template>
  <div class="frame-page">

    <Row :space="9">
      <Cell width="18" ><div>
      <div class="h-panel">
        <div class="flex justify-between p-10px">
          <div class="flex">
            <Select  v-model="params.projectId" keyName="id" titleName="name" placeholder="项目"  :datas="projectList" style="width: 120px;padding-left: 5px;"></Select>
            <Select v-model="params.adminId" keyName="id" titleName="name" placeholder="负责人"  :datas="adminList" style="width: 120px;padding-left: 5px;"></Select>
            <Select v-model="params.todoType"  placeholder="全部类型"  :datas="todoTypes" style="width: 100px;padding-left: 5px;"></Select>
            <Select v-model="params.priority"  placeholder="全部级别"  :datas="prioritys" style="width: 100px;padding-left: 5px;"></Select>
            <Select v-model="params.todoState"  placeholder="全部状态"  :datas="todoStates" style="width: 100px;padding-left: 5px;"></Select>
            <Input id="name" v-model="params.name" style="width: 140px;padding-left: 5px;" class="ml-5px" placeholder="请输入关键字" />
            <Button color="primary"  :loading="loading" @click="doSearch" class="ml-10px">查询</Button>
          </div>
          <div>
            <Button @click="showForm()" color="primary" >添加</Button>
          </div>
        </div>
      </div>
     <vxe-table row-id="id"
                                        ref="table"
                                        :seq-config="{startIndex: (pagination.page - 1) * pagination.size}"
                                        :data="dataList"
                                        highlight-hover-row
                                        show-overflow
                                        @sort-change="sortChangeEvent"
                                        border
                                        :row-config="{height: 48,isCurrent: true, isHover: true}"
                                        :loading="loading">
        <vxe-column type="seq" width="40" title="#" align="center"/>
        <vxe-column title="项目" field="projectName" width="100" align="center" sortable/>
        <vxe-column title="任务标题" field="name"  show-overflow width="200"/>
        <vxe-column title="负责人" field="adminName" width="100" align="center" sortable/>
        <vxe-column title="开始" field="startDate"  show-overflow width="100" sortable/>
        <vxe-column title="结束" field="endDate"  show-overflow width="100" sortable />
       <vxe-column title="预计天数" field="day" width="100" align="center" sortable>
         <template #default="{row}">
           <Tag color="gray">38天/78%</Tag>
         </template>
       </vxe-column>
        <vxe-column title="任务状态" field="todoState" width="100" align="center" sortable>
          <template #default="{row}">
            <Tag color="gray" v-if="row.todoState==='进行中'">进行中</Tag>
            <Tag color="gray" v-else-if="row.todoState==='已完成'">已完成</Tag>
            <Tag color="gray" v-else>未审核</Tag>
          </template>
        </vxe-column>
        <vxe-column title="优先级" field="priority" width="105"  align="center" sortable>
          <template #default="{row}">
            <Tag color="red" v-if="row.priority === '严重'">严重</Tag>
            <Tag color="gray" v-else-if="row.priority === '主要'">主要</Tag>
            <Tag color="gray" v-else-if="row.priority === '次要'">次要</Tag>
            <Tag color="gray" v-else-if="row.priority === '不重要'">不重要</Tag>
            <Tag color="gray" v-else>无优先级</Tag>
          </template>
        </vxe-column>
        <vxe-column title="任务类型" field="todoType" width="100" align="center" sortable>
          <template #default="{row}">
            <Tag color="gray" v-if="row.todoType==='需求'">需求</Tag>
            <Tag color="gray" v-else-if="row.todoType==='BUG'">BUG</Tag>
            <Tag color="gray" v-else>任务</Tag>
          </template>
        </vxe-column>
        <vxe-column title="创建时间" field="createDate" width="150" sortable/>
        <vxe-column title="操作" align="center" fixed="right" width="100">
          <template #default="{row}">
            <div class="flex items-center justify-center">
              <span class=" primary-color text-hover ml-10px"  @click="showForm(row)" size="s"> 编辑</span>
              <span class="primary-color ml-10px text-hover" @click="doRemove(row)" size="s">删除</span>
            </div>
          </template>
        </vxe-column>
      </vxe-table>
        <Pagination align="right" class="mt-16px" v-model="pagination" @change="pageChange" small/></div></Cell>
      <Cell width="6" >
        <div class="h-panel" style="background-color: #eeeeee">
          <div class="h-panel-bar">
            <span class="h-panel-title">动态</span>
            <span class="h-panel-right">这是一个测试</span>
          </div>
          <div class="h-panel-body">
            <p>用户：李泽龙 &nbsp;&nbsp;&nbsp; 时间：2023-12-24 16:10</p>
            <p style="background-color: #fff;margin-bottom: 20px">1.修改权限框架设计</p>
            <p>用户：李泽龙 &nbsp;&nbsp;&nbsp; 时间：2023-12-24 16:10</p>
            <p style="background-color: #fff;margin-bottom: 20px">
            1.修改权限框架设计<br>
            2.CHATGPT对接微信<br>
            3.修复供应链系统bug</p>
            <p>用户：李泽龙 &nbsp;&nbsp;&nbsp; 时间：2023-12-24 16:10</p>
            <p style="background-color: #fff;margin-bottom: 20px">
              1.修改权限框架设计<br>
              2.CHATGPT对接微信<br>
              3.修复供应链系统bug</p>
            <p>用户：李泽龙 &nbsp;&nbsp;&nbsp; 时间：2023-12-24 16:10</p>
            <p style="background-color: #fff;margin-bottom: 20px">
              1.修改权限框架设计<br>
              2.CHATGPT对接微信<br>
              3.修复供应链系统bug</p>
            <p>用户：李泽龙 &nbsp;&nbsp;&nbsp; 时间：2023-12-24 16:10</p>
            <p style="background-color: #fff;margin-bottom: 20px">
              1.修改权限框架设计<br>
              2.CHATGPT对接微信<br>
              3.修复供应链系统bug</p>
          </div>
          <div class="layui-layer-btn layui-layer-btn-r">
            <Input type="text" v-model="value" class="mr-10px"/>
            <Button  color="primary" @click="confirm" :loading="loading">
              发送
            </Button>
          </div>
        </div>
      </Cell>
    </Row>

  </div>
</template>

<script>
import TodoListForm from "./TodoListForm.vue";
import TodoList from "@js/api/TodoList";
import Admin from "@js/api/Admin";
import Project from "@js/api/Project";
import {confirm, message} from "heyui";
import {layer} from "@layui/layer-vue";
import {h} from "vue";
import manba from "manba";

/**
 * @功能描述: 代办任务
 * @创建时间: 2023年08月08日
 * @公司官网: www.fenxi365.com
 * @公司信息: 纷析云（杭州）科技有限公司
 * @公司介绍: 专注于财务相关软件开发, 企业会计自动化解决方案
 */
export default {
  name: "TodoList",
  components: {TodoListForm},
  data() {
    return {
      loading: false,
      todoTypes:{需求:'需求',任务:'任务',BUG:'BUG'},
      prioritys:{无优先级:'无优先级', 严重:'严重', 主要:'主要', 次要:'次要',不重要:'不重要'},
      todoStates:{待审核:'待审核', 进行中:'进行中', 已完成:'已完成'},
      params: {
        name: null,
        adminId: null,
        projectId: null,
        todoType:null,
        priority:null,
        todoState:'进行中',
      },
      checkedRows: [],
      dataList: [],
      projectList: [],
      adminList: [],
      pagination: {
        page: 1,
        size: 50,
        total: 0
      },
    }
  },
  computed: {
    queryParams() {
      return Object.assign(this.params, {
        page: this.pagination.page,
        pageSize: this.pagination.size
      })
    }
  },
  methods: {
    sortChangeEvent({field, order}) {
      this.params.sortCol = field;
      this.params.sort = order;
      this.loadList();
    },
    formatDate({cellValue}){
      return manba(cellValue).format("YYYY-MM-DD")
    },
    change(data) {
      message.info(`切换至${data.title}`, 1000);
    },
    showForm(entity) {
      let layerId = layer.open({
        title: "代办任务",
        shadeClose: false,
        closeBtn: false,
        area: ['600px', entity ? '450px' : '450px'],
        content: h(TodoListForm, {
          entity,
          onClose: () => {
            layer.close(layerId);
          },
          onSuccess: () => {
            this.doSearch();
            layer.close(layerId);
          }
        })
      });
    },
    loadList() {
      this.loading = true;
      TodoList.list(this.queryParams).then(({data}) => {
        this.dataList = data.results;
        this.pagination.total = data.total;
      }).finally(() => this.loading = false);
    },
    pageChange() {
      this.loadList();
    },
    doSearch() {
      this.pagination.page = 1;
      this.loadList();
    },
    doRemove(row) {
      confirm({
        title: "系统提示",
        content: `确认删除用户：${row.name}?`,
        onConfirm: () => {
          TodoList.remove(row.id).then(() => {
            message("删除成功~");
            this.loadList();
          })
        }
      })
    }
  },
  created() {
    this.loadList();
    Admin.list().then(({data}) => {
      this.adminList = data;
    })
    Project.list().then(({data}) => {
      this.projectList = data;
    })
  }
}
</script>
